<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta content="telephone=no" name="format-detection" />
    <!-- 留作将来统一添加 -->
    <TEMPLATE>${TEMPLATE}</TEMPLATE>
    <title>模板html</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/index.css">
    <link rel="stylesheet" type="text/css" href="../../css/data-flex.min.css">
    <style type="text/css">
        .nav-bar {
            height: 44px;
            box-sizing: content-box;
        }

        .back {
            width: 44px;
            height: 44px;
            margin-right: 10px;
        }

        .btn {
            width: 60px !important;
            line-height: 31px;
            font-size: 15px;
            color: rgba(255, 255, 255, 1);
            text-align: center;
        }

        .search-box {
            height: 31px;
            border-radius: 19px;
            background-color: rgba(255, 255, 255, 0.26);
            padding: 0 16px;
        }

        .search-box img {
            width: 15px;
            height: 15px;
            margin-right: 10px;
        }

        .search-box input {
            background: none;
            border: 0;
            outline: none;
            color: #fff;
            font-size: 15px;
            line-height: 21px;
        }

        .search-box input::placeholder {
            color: #fff;
            line-height: 1.5;
        }

        .item {
            margin: 15px;
            padding: 15px 20px;
            box-shadow: 0px 4px 10px 0px rgba(0, 135, 214, 0.37);
            border-radius: 10px;
            background-color: #fff;
        }

        .cls-info {
            margin-right: 10px;
        }

        .cls-info p {
            font-size: 16px;
            font-weight: 500;
            color: rgba(25, 25, 25, 1);
            margin-bottom: 6px;
        }

        .cls-info img {
            width: 20px;
            height: 20px;
            border-radius: 50%;
        }

        .cls-info span {
            margin-left: 8px;
            font-size: 13px;
            color: rgba(128, 128, 128, 1);
        }

        img.add-cls {
            width: 27px;
            height: 27px;
        }

        p.add-cls {
            color: #999;
            text-align: right;
            font-size: 14px;
        }

        .books {
            padding: 0 7.5px;
            flex-wrap: wrap;
        }

        .book {
            width: 33.333%;
            padding: 0 7.5px;
        }

        .image .main {
            width: 105px;
            height: 140px;
            margin: 15px auto 0 auto;
            background: rgba(77, 181, 216, 1);
            box-shadow: 0px 2px 9px 0px rgba(0, 0, 0, 0.16);
            border-radius: 5px;
            overflow: hidden;
        }
        .image {
            position: relative;
        }
        .image .point {
            position: absolute;
            top: 0;
            left: 0;
            width: 41px;
            height: 41px;
            z-index: 9;
        }

        .title {
            width: 105px;
            height: 32px;
            margin: 8px auto 0 auto;
            font-size: 14px;
            font-weight: 400;
            color: rgba(25, 25, 25, 1);
            line-height: 16px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }

        .tips {
            flex-grow: 1;
            margin-top: 110px;
            text-align: center;
        }

        .tips img {
            display: block;
            width: 150px;
            height: 150px;
            margin: 0 auto;
        }

        .tips span {
            font-size:12px;
            font-weight:400;
            color:rgba(128,128,128,1);
            line-height:17px;
        }

        .kj-container {
            padding: 15px;
        }

        .kj-bg {
            background-color: #F5F5F5;
        }

        .kj-container .kj-item {
            padding: 15px;
            background-color: #FFFFFF;
            border-radius: 10px;
            margin-top: 10px;
        }

        .kj-container .item:first-child {
            margin-top: 0;
        }

        .kj-container .kj-title {
            padding-right: 10px;
            font-size: 16px;
            font-weight: 500;
            color: #191919;
            overflow: hidden;
        }

        .kj-container .price {
            font-size: 14px;
            font-weight: 500;
            color: #FD9B43;
        }

        .kj-container .count {
            font-size: 12px;
            font-weight: 400;
            color: #808080;
            margin-top: 10px;
        }

        .kj-container .des {
            font-size: 12px;
            font-weight: 400;
            color: #BFBFBF;
            margin-top: 15px;
        }
    </style>
</head>

<body>
    <div class="vueApp" v-cloak>
        <header class="blue-bg" id="header" class="nav-bar" data-flex="box:justify cross:center">
            <img class="back" onclick="api.closeWin()" src="../../image/nav_back.png" alt="">
            <div class="search-box" data-flex="box:first cross:center">
                <img src="../../image/ui/search.png" alt="">
                <input type="text" v-model="keyword" :placeholder="pContent">
            </div>
            <div class="btn" @click="fnSearch('headerRefreshing')">搜索</div>
        </header>
        <div v-if="type == 1">
            <!-- 班级 -->
            <div v-for="item,index in listData" class="item" data-flex="box:last cross:center">
                <div class="cls-info">
                    <p class="one-line">{{ item.classesName }}</p>
                    <div data-flex>
                        <img :src="item.icon || '../../image/ui/tea_def.png'" alt="">
                        <span>{{ item.nickName }}</span>
                    </div>
                </div>
                <img class="add-cls" v-if="item.isJoinClass == 0" @click="joinClass(item)"
                    src="../../image/course/class_add.png" alt="">
                <p class="add-cls" v-if="item.isJoinClass == 1">已加入</p>
            </div>
            <div class="item" v-show="searchNull" data-flex="main:center cross:center">
                <span style="font-size:14px;">未找到相应班级</span>
            </div>
        </div>
        <!-- 课件 -->
        <div class="kj-container" v-else-if="type == 4 && listData.length">
            <div class="kj-item" v-for="item in listData" @click="handleItem(item)">
                <div data-flex="cross:center">
                    <div class="kj-title" data-flex-box="1">
                        {{ item.courseWareName }}
                    </div>
                    <div class="price" v-if="item.payMethod == 2">{{item.payAmount}}积分</div>
                    <div class="price" v-else-if="item.payMethod == 1">免费</div>
                </div>
                <div class="count">课件数量：{{item.contentNum}}</div>
                <div class="des">{{item.signName}}</div>
            </div>
            <div class="tips" v-show="searchNull">
                <img src="../../image/ui/search_null.png" alt="">
                <span>没有找到该结果</span>
            </div>
        </div>
        <!-- 视频和绘本 -->
        <div v-else class="books" data-flex>
            <div class="book" v-for="item in listData" @click="handleItem(item)">
                <div class="image">
                    <img class="point" v-if="type == 3" :src="'../../image/course/video-'+ item.point +'.png'" alt="">
                    <img class="main" :src="item.pic || item.pbookPic" alt="">
                </div>
                <div class="title">{{ item.name || item.pbookName }}</div>
            </div>
            <div class="tips" v-show="searchNull">
                <img src="../../image/ui/search_null.png" alt="">
                <span>没有找到该结果</span>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/service/service-tool.js"></script>
<script type="text/javascript" src="../../script/service/service-app.js"></script>
<script type="text/javascript" src="../../script/service/service-user.js"></script>
<script type="text/javascript" src="../../script/service/service-logic.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript">
    // html 的引号一律为双引号(""),js 为单引号('')
    var USER, $S, vm;
    var pageParam = {};
    apiready = function () {
        $S = SERVICE();
        USER = USER();
        console.log(JSON.stringify(api.pageParam) + '=====pageParam');
        pageParam = api.pageParam;
        fnInit();
    };

    // 初始化
    function fnInit() {
        vm = new Vue({
            el: '.vueApp',
            data: {
                // 搜索是否为空
                searchNull: false,
                // 1: 班级 2: 绘本 3: 视频 4: 课件
                type: pageParam.type || 1,
                // 关键字
                keyword: '',
                pageNo: 1,
                pageSize: 10,
                // 数据列表
                listData: []
            },
            computed: {
                pContent: function() {
                    var content = '请输入';
                    switch(this.type) {
                        case 1:
                            content += '班级编号查找班级';
                            break;
                        case 2:
                            content += '绘本名称';
                            break;
                        case 3:
                            content += '视频名称';
                            break;
                        case 4:
                            content += '课件名称';
                            break;
                        default:
                            content += '关键字';
                    }
                    return content;
                }
            },
            beforeCreate: function() {
                if(pageParam.type == 1) {
                    $('body').attr('class', 'blue-bg');
                } else if(pageParam.type == 4) {
                    $('body').attr('class', 'kj-bg');
                }
            }
        });
        load();
    }

    function load() {
        fnAddHeaderRefreshingEvent(function() {
            fnSearch('headerRefreshing');
        });

        fnAddFooterLoadingEvent(function() {
            fnSearch('load');
        });
    }

    // 搜索
    function fnSearch(sign) {
        if(vm.keyword === '') {
            fnToast('关键字不能为空');
            return;
        }
        if(sign == 'headerRefreshing') {
            vm.pageNo = 1;
        } else {
            vm.pageNo ++;
        }
        var url,
            params = {
                pageNo: vm.pageNo,
                pageSize: vm.pageSize
            };
        switch(vm.type) {
            case 1:
                url = 'clsClass/findClassesList';
                Object.assign(params, {
                    classesName: vm.keyword
                });
                break;
            case 2:
                url = 'stuPicture/findStuPictureBookForName';
                Object.assign(params, {
                    pbookName: vm.keyword
                });
                break;
            case 3:
                url = 'videos/findParductsByCategory';
                Object.assign(params, {
                    name: vm.keyword,
                    videoCategoryId: pageParam.lev2Id
                });
                break;
            case 4:
                url = 'courseWare/findCourseWareForName';
                Object.assign(params, {
                    courseWareName: vm.keyword
                });
                break;
        }
        var callback = function (data) {
            if(vm.pageNo == '1') {
                vm.listData = [];
            }
            vm.listData = vm.listData.concat(data.listData);
            if(vm.listData.length === 0) {
                vm.searchNull = true;
            } else {
                vm.searchNull = false;
            };
            // status 为200时,只返回data
        };
        var error = function (res) {
            // status 不是200时,全部返回
            api.refreshHeaderLoadDone();
        };
        POST(url, params, callback, error);
    }

    // 加入班级
    function joinClass(item) {
        var url = 'clsClass/joinClass';
        var params = {
            "classesId": item.id
        };
        var callback = function (data) {
            fnToast('加入成功');
            api.execScript({
                name: 'main',
                frameName: 'tab_index_frm1',
                script: 'getPageData()'
            })
            api.closeToWin({
                name: 'main'
            });
            // status 为200时,只返回data
        };
        var error = function (res) {
            // status 不是200时,全部返回
            api.refreshHeaderLoadDone();
        };
        if (USER.Get('schoolId', true) !== '') {
            POST(url, params, callback, error);
        } else {
            fnToast('请先选择您所在的学校');
            fnOpenPublicWin(
                '个人资料',
                'teacher/user_info',
                {
                    isBtn: true,
                    btnName: '保存',
                    headerFn: 'headerFn'
                }
            )
        }
    }

    // 列表
    function handleItem(item) {
        if(vm.type === 2) {
            fnOpenPublicWin(item.pbookName, 'video/hb_detail', {
                hbId: item.id
            });
        } else if(vm.type === 3) {
            fnOpenPublicWin(
                item.name,
                'video/detail',
                {
                    isBtn: true,
                    btnType: 'img',
                    btnName: 'ui/share',
                    headerFn: 'headerFn',
                    productsId: item.id,
                    scope: item.scope,
                    isSlidBack: false
                }
            )
        } else if(vm.type === 4) {
            fnOpenPublicWin(item.courseWareName, 'video/courseware_detail', {
                kjId: item.id
            });
        }
    }
</script>

</html>